
import {  App, InjectionKey } from 'vue';
import Vuex,{ createStore, Store,StoreOptions } from 'vuex';
import { AppRouteModule } from '/@ts/router/types';
import router from '/@ts/router';
import {loginModule} from '/@ts/store/modules/login';
import {permissionsModule} from '/@ts/store/modules/permission';
import { RootState } from '/@ts/store/root-types';
import { SwitchColor } from '/@ts/hooks/theme';
import { MenuRouter } from "/@ts/router/routes";
import { ROOT_PAGE_NAME,ROOT_ADMIN_PAGE_NAME } from '../router/constant';
// 定义 injection key 
export const key: InjectionKey<Store<RootState>> = Symbol()
// 创建一个新的 store 实例 StoreOptions<RootState>
export interface Theme {
  themeNav:SwitchColor[],
  themeMenu:SwitchColor[],
}
export const theme:Theme = {
  themeNav:[
    {
      ColorFont:"#333",
      ColorBg:"#FFF",
     },
     {
    ColorFont:"#FFF",
    ColorBg:"#009688",
   },
   {
    ColorFont:"#FFF",
    ColorBg:"#383F45",
   },
   {
    ColorFont:"#FFF",
    ColorBg:"#394664",
   },
   {
    ColorFont:"#FFF",
    ColorBg:"#409EFF",
   },
  ],
   themeMenu:[
    {
      ColorFont:"#FFF",
      ColorBg:"#001529",
     },
    {
      ColorFont:"#FFF",
      ColorBg:"#23262E",
     },
    {
    ColorFont:"#FFF",
    ColorBg:"#383F45",
   },
   {
    ColorFont:"#FFF",
    ColorBg:"#394664",
   },
  ]
}
interface SysTheme {
  name:string,
  themeColor:Array<string>
  themeNav:SwitchColor,
  navTitleColorFont:string
  themeMenu:SwitchColor,
}
export const sysThemeList:Array<SysTheme> = [
  {//系统默认 配色
    name:"系统默认",
    navTitleColorFont:"#FFF",
    themeColor:["9","96","189"],
    themeNav:    {
      ColorFont:"#333",
      ColorBg:"#FFF",
     },
     themeMenu: {
      ColorFont:"#FFF",
      ColorBg:"#001529",
     },
  },
  {//系统默认 配色
    name:"护眼",
    navTitleColorFont:"#333",
    themeColor:["039","177","153"],
    themeNav:    {
      ColorFont:"#333",
      ColorBg:"#FFF",
     },
     themeMenu: {
      ColorFont:"#606266",
      ColorBg:"#FFF",
     },
  }
]
export const themeColor:string[] = ["9","96","189"]
export const store:Store<RootState> = createStore({
    state(){
     return {
      baseRouters:[],//路由列表 可前端写死,可后端返回
      navTitleColorFont:sysThemeList[0].navTitleColorFont,
       isFull:false,//是否通栏
       projectName:"llt-admin",//项目标题
       BreadcrumbList:[],//面包屑
       tagPages:[],//导航标签页
       currentTag:0,//当前选中的标签索引值
       menuActiveName:"/workbench",//当前菜单默认选中菜单
       refresh:false,//刷新状态 false 刷新结束
       themeCurrentMenuItem:theme.themeMenu[0],
       themeCurrentNavItem:theme.themeNav[0],//当前导航主题配色
       themeColor:themeColor,//这里的初始化的值与 init.scss HTML的值保持一直
     }
    },
    mutations:{
      setBaseRouters(state: RootState,value:AppRouteModule[]){
        //调用此方法必须先登录
        //路由列表 可前端写死,可后端返回
          if(true){//true 登录了
            // let data = JSON.parse(localStorage.getItem('userinfo'))
            // if(data.user_type == 'customer'){
            //   state.baseRouters = basicRoutes
            // }else{
            //   state.baseRouters = basicSupplierRoutes
            // }
            state.baseRouters = value //后台返回或者前端写死
            for (let index = 0; index < state.baseRouters.length; index++) {
              const element = state.baseRouters[index];
              element.component = eval(element.component)
              router.addRoute(ROOT_PAGE_NAME,(element as any))
            }
          }
      },
      setThemeColor(state:RootState,value:string[]){
        state.themeColor = value
        document.documentElement.style.setProperty("--color-red", value[0]);
        document.documentElement.style.setProperty("--color-green", value[1]);
        document.documentElement.style.setProperty("--color-blue", value[2]);
        localStorage.setItem("themeColor",JSON.stringify(value))
      },
      setIsFull(state:RootState,value:boolean){
        state.isFull=value;
        localStorage.setItem("isFull",JSON.stringify(value))
      },
      setThemeCurrentNavItem(state:RootState,value:SwitchColor){
        state.themeCurrentNavItem=value
        localStorage.setItem("themeNav",JSON.stringify(value))
      },
      setNavTitleColorFont(state:RootState,value:string){
        state.navTitleColorFont=value
        localStorage.setItem("navTitleColorFont",value)
      },
      setThemeCurrentMenuItem(state:RootState,value:SwitchColor){
        state.themeCurrentMenuItem=value
        localStorage.setItem("themeMenu",JSON.stringify(value))
      },
      setRefresh(state:RootState){
        state.refresh = true;
        setTimeout(() => {
          state.refresh = false;
        }, 100);
      },
      setMenuActiveName(state:RootState,value:string){
        state.menuActiveName=value
      },
      setCurrentTag(state:RootState,value:number){
        state.currentTag=value
      },
      setBreadcrumbList(state:RootState,value:AppRouteModule[]){
        state.BreadcrumbList=value
      },
      setTagPages(state:RootState,value:AppRouteModule){
      
        
        if(state.tagPages.some(v => v.path == value.path)){
          console.log('value.path:>> ', value.path);
          return
        }
        state.tagPages.push(JSON.parse(JSON.stringify(value)))
   
         //刷新页面
      // store.commit("setRefresh")
      },
      setCloseTagPages(state:RootState,value:number){
        state.tagPages.splice(value,1)
        router.push( state.tagPages[state.tagPages.length - 1])
      },
      //重新赋值标签页
      MoreCloseTagPages(state:RootState,value:AppRouteModule[]){
        state.tagPages=value
        let data = state.tagPages[state.tagPages.length - 1]
        router.push(data)
      }
    },
    actions:{
      initRoute({commit,state},value){
        //调用这个说明刷新了
      
        return new Promise((resolve:any, reject:any)=>{
          let data =[
            ...MenuRouter
          ]
          commit('setBaseRouters',data)
          // resolve('resolve')
        })
      }
    },
    modules:{
        loginModule,
        permissionsModule
   }
  })
/**
 * 挂载到vue实例函数
 * @param app vue实例
 */
 export function setupStore(app: App<Element>) {
  app.use(store,key);
}